<template>
	<div class="_page">
		<div class="cnt">
			<div class="top">
				<el-carousel :height="settingStore.vertical ? '600px':'400px'">
					<el-carousel-item v-for="item in zsUrls" :key="item">
						<div class="_img">
							<img :src="previewUrl + item" alt="" srcset="">
						</div>
					</el-carousel-item>
				</el-carousel>

				<div class="name">
					<span>{{ form.model }}</span>
					<span>{{ form.typeName }}</span>
				</div>
			</div>

			<div class="pics">
				<img v-for="(item, idx) in wgUrls" :key="idx" :src="previewUrl + item" alt="" srcset="">
			</div>
			<div class="pics">
				<img v-for="(item, idx) in nsUrls" :key="idx" :src="previewUrl + item" alt="" srcset="">
			</div>
			<div>
				<!-- <div class="oper">
					<div class="btns">
						<button :class="{checked: overview}" @click="changeView(true)">overview</button>
						<button :class="{checked: !overview}" @click="changeView(false)">details</button>
					</div>
				</div> -->
				<div class="boxs">
					<div class="infos" :class="{tl: !overview}">
						<!-- <h1>{{ form.model }}</h1>
						<span class="blue">Crafting Legacy</span>
						<span>length: {{ form.length }}</span> -->

						<div class="info">
							<div class="color_box"> <span>{{ form.brandName }}</span> </div>
							<div class="left">
								<div v-for="(column, idx) in form.productSpecs" :key="idx" class="line">
									<span>{{ column.specName }}</span>
									<span>{{ column.specValue }}</span>
								</div>
							</div>
							<!-- <div class="color_box">{{ form.brandName }}</div> -->
						</div>
						<p>{{ form.depict }}</p>
					</div>
					<!-- <div class="infos ri" :class="{tl: !overview}">
						<h1>{{ form.model }}</h1>
						<span class="blue">Crafting Legacy</span>
						<span>length: {{ form.length }}</span>
						<p>
							{{ form.feature }}
						</p>
					</div> -->
				</div>
			</div>
			
		</div>
	</div>
</template>

<script setup lang="ts">
	import { useUserStore } from '@/store/modules/user'
	import { ref, onMounted, reactive, computed } from 'vue'
	import { vesselsgetByld } from '@/api/boat/basic'
	import echarts from '@/components/echarts'
	import { useRoute } from 'vue-router'
	import { useI18n } from 'vue-i18n'
	import { useSettingStore } from '@/store/modules/setting'

	const { t } = useI18n()
	let settingStore = useSettingStore()

	const previewUrl = ref(import.meta.env.VITE_IMG_SERVE)
	let userStore = useUserStore()
	let route = useRoute()
	onMounted(() => {
		getBoatsInfo(route.query)
	})
	let overview = ref(true)
	const changeView = val => {
		overview.value = val
	}
	const columns = computed(() => [
	  // { lable: t('boat.model'), key: 'model' },
	  // { lable: t('boat.brand'), key: 'brandName' },
	  { lable: t('boat.type'), key: 'typeName' },
	  { lable: t('boat.engibes'), key: 'engines' },
	  { lable: t('boat.cssd2'), key: 'draft' },
	  { lable: t('boat.cc2'), key: 'length' },
	  { lable: t('boat.ck2'), key: 'maxBeam' },
	  { lable: t('boat.zdhs2'), key: 'maxSpeed' },
	  { lable: t('boat.zdzz2'), key: 'maxWeightLb' },
	])
	let advices = ref([{
		img: '',
		model: 'model 001',
		desc: 'desc'
	}])

	let form = reactive({
		brandId: '',
		brandName: '',
		crew: '',
		cruiseSpeed: '',
		depict: '',
		displacement: '',
		documentUrl: '',
		draft: '',
		draftFt: '',
		draftM: '',
		engines: '',
		feature: '',
		freshWaterTank: '',
		fuelTank: '',
		id: '',
		imgInfoList: '',
		length: '',
		lengthFt: '',
		lengthM: '',
		mainImageUrl: '',
		maxBeam: '',
		maxBeamFt: '',
		maxBeamM: '',
		maxSpeed: '',
		maxSpeedKn: '',
		maxSpeedMph: '',
		maxWeight: '',
		maxWeightLb: '',
		maxWeightTon: '',
		model: '',
		typeId: '',
		typeName: '',
		productSpecs: []
	})

	let zsUrls = ref([])
	let wgUrls = ref([])
	let nsUrls = ref([])

	const getBoatsInfo = async (param) => {
		try {
			let { data, status } = await vesselsgetByld(param)
			if (status == 200) {
				let { mainImageUrl, imgInfoList, productSpecs } = data

				Object.keys(form).forEach((key) => {
					form[key] = data[key]
				})
				if (productSpecs) {
					form.productSpecs = JSON.parse(productSpecs)
				}
				let zs = [mainImageUrl], wg = [], ns = []
				imgInfoList.forEach(v => {
					if (v.imgType == 1) {
						zs.push(v.imgUrl)
					} else if (v.imgType == 2) {
						wg.push(v.imgUrl)
					} else if (v.imgType == 3) {
						ns.push(v.imgUrl)
					}
				})

				zsUrls.value = zs
				wgUrls.value = wg
				nsUrls.value = ns
			} else {
				// ElMessage({ type: 'error', message: msg })
			}
		} catch (e) {
			//TODO handle the exception
		}
	}
</script>

<style lang="scss" scoped>

::v-deep .el-carousel__button {
	height: 10px;
}

	$same_color: $theme-primary;

	._page {
		max-width: 1500px;
		margin: 0 auto;
	}

	.cnt {

		.top {
			position: relative;

			._img {
				width: 100%;
				height: 100%;
				position: relative;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.name {
				position: absolute;
				bottom: 40px;
				left: 50%;
				transform: translateX(-50%);
				color: $theme-primary;
				font-style: italic;

				span {
					display: block;
					text-align: center;
					line-height: 1.5;

					&:first-child {
						font-size: 2rem;
					}
				}
			}
		}
		
		.pics {
			display: flex;
			flex-wrap: wrap;
			overflow-x: auto;
			margin: 10px 0;
			
			img {
				flex: 1 0 33.33%;
				height: 400px;
				max-width: 100%;
				object-fit: cover;
			}
		}
		
		.oper {
			display: flex;
			justify-content: center;
			flex-wrap: nowrap;
			border-bottom: 1px solid #616161;
			.btns {
				button {
					width: 150px;
					border: 1px solid #616161;
					border-bottom: 0;
					background-color: #fff;
					padding: 6px 0;
					&:first-child {
						border-right: 0;
					}
					
					&.checked {
						background-color: #d9d9d9;
					}
				}
			}
		}
		
		.boxs {
			display: flex;
			overflow: hidden;
		}
		.infos {
			width: 100%;
			flex-shrink: 0;
			color: #636363;
			font-size: 1.2rem;
			transition: all .5s;

			&.ri {
				text-align: center;
				
				p {
					width: 70%;
					margin: 0 auto;
					text-align: left;
					margin-top: 20px;
				}
			}
			
			&>span {
				display: block;
				font-size: 1rem;
				line-height: 1.2;

				&.blue {
					color: $theme-primary;
				}
			}

			&.tl {
				transform: translateX(-100%);
			}
			h1 {
				color: $theme-primary;
				font-size: 1.6rem;
				line-height: 1.5;
			}
			
			&>p {
				margin: 40px 0;
				font-size: 1rem;
				line-height: 1.5;
			}
			
			.info {
				display: flex;
				width: 100%;
				
				.left {
					flex: 1 1 30%;
					margin: 0 20px;
					// margin-right: 40px;
					
					.line {
						display: flex;
						border-bottom: 1px solid #000;
						// height: 40px;
						// line-height: 40px;
						padding: 10px 0;
						font-size: 1rem;
						// word-break: keep-all;
						// white-space: nowrap;
						
						span {
							display: block;
							flex: 1;
							&:first-child {
								color: $theme-primary;
							}
							&:last-child {
								text-align: right;
							}
						}
						&:last-child {
							border-bottom: 0;
						}
					}
				}
				.color_box {
					flex: 1 1 30%;
					background-color: #2a2c41;
					color: #f4f4f8;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 4rem;
					font-style: italic;
					min-height: 100px;
					span {
						transition: all .5s;
					}
					&:hover>span {
						transform: scale(1.2);
					}
					
					&:last-child {
						background-color: #d9d9d9;
					}
				}
			}
			
		}
	}
	
	
	@media (max-width: 768px) { 
		.cnt {
			
			.infos {
				
				&.ri p {
					width: 100%;
				}
				.info {
					display: block !important;
					
					.left {
						margin: 0;
					}
					
					.color_box {
						font-size: 2rem;
					}
				}
			}
		}
	}
</style>